<template>
  <div class="sub-floor flex" ref="floorTarget">
    <div class="avatar-container">
      <el-avatar :size="24" :src="reComment.authorAvatar"/>
    </div>
    <div class="con m-l-16 flex-1">
      <div class="flex align-items-center content-space-between p-b-5">
        <router-link
          :to="`/${$rp.USERS}/${reComment.authorId}`"
          target="_blank"
          class="title link"
          v-text="reComment.authorNickname"
        />
        <span
          v-if="reComment.authorId === curUser.id && !edit"
          class="link el-link--primary m-r-16"
          @click="edit = true"
        >编辑</span>
      </div>
      <template v-if="reComment.receiver">
        回复
        <router-link
          :to="`/${$rp.USERS}/${reComment.receiver.id}`"
          target="_blank"
          class="at-user"
          v-text="`@${reComment.receiver.nickname}`"
        />
        :
      </template>
      <template v-if="!edit">
        <div class="p-y-2 ">
          <div v-html="emojiFormat(reComment.content)"></div>
        </div>
        <div class="flex info f-mini">
          <timeago2 :date-time="commentTime.time" :pre-text="commentTime.pre" />
          <VoteIcons :comment.sync="reComment"/>
          <span class="f-mini m-l-16 link primary-hover-color" @click="replySubFloor">回复</span>
        </div>
      </template>
      <template v-else>
        <comment-edit
          :key="`${reComment.id}-edit`"
          :edit.sync="edit"
          :floor="reComment"
          v-on:updatedComment="updatedComment"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import EmojiMixin from '@/components/emoji/emoji-mixin';
import CommentEdit from './comment-edit';
import VoteIcons from './VoteIcons';

export default {
  name: 'SubFloor', // 楼中楼
  mixins: [EmojiMixin],
  components: { VoteIcons, CommentEdit },
  props: {
    comment: { // 这个楼中楼的数据
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      reComment: this.comment, // 复制一遍，避免点赞后更新数据时报错
      edit: false,
    };
  },
  computed: {
    ...mapState({ curUser: 'currentUser' }),
    commentTime() {
      const createdAt = new Date(this.reComment.created_at).getTime();
      const updatedAt = new Date(this.reComment.updated_at).getTime();
      if (createdAt < updatedAt - 1000) return { time: this.reComment.updated_at, pre: '编辑于 ' };
      return { time: this.reComment.created_at };
    },
  },
  methods: {
    // 回复楼中楼
    replySubFloor() {
      this.$emit('replySubFloor', {
        commentId: this.reComment.id,
        userId: this.reComment.authorId,
        userNickname: this.reComment.authorNickname,
      });
    },
    // 当通过消息提醒跳过来时，获取焦点
    getFocus() {
      const currentSubFloor = this.comment.id === Number(this.$route.query.sub_comment_id);
      if (currentSubFloor) this.$refs.floorTarget.scrollIntoView({ block: 'center' });
    },
    updatedComment(comment) { this.reComment = comment; },
  },
  mounted() { this.getFocus(); },
};
</script>

<style lang="scss" scoped>
.sub-floor {
  margin-top: .5rem;
  background-color: #fff;
  border-radius: 4px;

  >.avatar-container {
    margin-top: .5rem;
    margin-left: .3125rem;
  }

  >.con {
    padding-top: .5rem;
    padding-bottom: .5rem;
    min-width: 0;
  }
}
</style>
